<template>
    <el-dialog v-dialog-drag :title="$t('AddPort')" :visible.sync="addPortDialog" width="30%"
               :before-close="handleAddPortClose">
        <el-form ref="portForm" :model="port" :rules="rules" class="demo-ruleForm" label-width="80px">
                <el-form-item :label="$t('Picture')" prop="path" required>
                    <el-col :span="11">
                        <el-select v-model="port.name" @change="changeSelectPortValue" :placeholder="$t('Please_Select')">
                            <el-option
                                v-for="img in imgList"
                                :key="img.path"
                                :value="img.name"
                                :label="img.name">
                                <img :src="img.path" style="width:25px;height:25px">
                            </el-option>


                        </el-select>
                    </el-col>
                    <el-col :span="11">
                        <img v-show="port.path" :src="port.path" align="center"
                             style="width:25px;height:25px;margin-left: 5px">
                    </el-col>

            </el-form-item>
            <el-form-item :label="$t('Width')" prop="width">
                <el-input v-model="port.width"></el-input>
            </el-form-item>
            <el-form-item :label="$t('Height')" prop="height">
                <el-input v-model="port.height"></el-input>
            </el-form-item>
            <el-form-item :label="$t('PortNum')" prop="portNum">
                <el-input v-model="port.portNum"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm('portForm')">{{$t('Confirm')}}</el-button>
            <el-button size="small" @click="handleAddPortClose">{{$t('Cancel')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import * as appServer from '../../../store/appServerParams.js'

    var canvas = undefined;
    export default {
        props : {
            addPortDialog: false,
        },
        data: function () {
            return{
                port: {//将要添加的port
                    width: 30,
                    height: 30,
                    path:"",
                    portNum:""
                },
                imgList: [],
                rules: {
                    path: [{required: true, message:  this.$t('Please_Select_Img')}],
                    width: [{required: true, message: this.$t('Please_Input_Width')}],
                    height: [{required: true, message: this.$t('Please_Input_Height')}],
                    portNum: [{required: true, message: this.$t('Please_Input_PortNum')}],
                }
            }


        },
        methods:{
            handleAddPortClose(done) {
                this.$parent.addPortDialog = false
            },
            changeSelectPortValue(value) {
                let vm = this;
                for(let index  in vm.imgList){
                    let item =  vm.imgList[index];
                    if (item.name == value) {
                        vm.port.name = item.name;
                        vm.port.path = item.path;
                        return;
                    }
                }
            },
            addPortImg() {
                let vm = this;
                let img = new Image(),img2 = new Image();
                img.src = vm.port.path;
                img.onload = function () {
                    let portType = 0;
                    if (vm.port.name.indexOf("rj45") != -1) {
                        portType = 1
                    }
                    if (vm.port.name.indexOf("SFP") != -1) {
                        portType = 2
                    }
                    if (vm.port.name.indexOf("M12") != -1) {
                        portType = 9
                    }
                    canvas = document.createElement('canvas');
                    canvas.setAttribute("width",vm.port.width)
                    canvas.setAttribute("height",vm.port.height)
                    var cxt=canvas.getContext("2d");
                    cxt.fillStyle="#ff0000";
                    cxt.beginPath();
                    cxt.fillRect(0,0,vm.port.width,vm.port.height);
                    cxt.drawImage(this, 0, 0, vm.port.width, vm.port.height);
                    cxt.closePath();
                    vm.$parent.addImg(vm.$parent.portGroup, vm.port.width, vm.port.height, canvas, vm.port.name, 'port', vm.port.portNum , portType);
                    vm.$parent.addPortDialog = false;
                }
            },
            getPortImgList() {
                let vm = this;
                vm.$http
                    .get('sys/getPortImgList')
                    .then(function (response) {
                        vm.imgList = [];
                        for (var index in response.data.imgList) {
                            let imgInfo = response.data.imgList[index];
                            imgInfo.path = appServer.BASE_URL + imgInfo.path;
                            vm.imgList.push(imgInfo);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addPortImg();
                    } else {
                        return false;
                    }
                });
            }

        },
        mounted() {
            var vm = this;
            vm.getPortImgList();
        }
    }
</script>

<style scoped>

</style>
